<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link href="${pageContext.request.contextPath}/image/logo.png" rel="Shortcut Icon">
	<style>

	</style>
</head>

<body>
<div id="main" style="width: 650px;height: 250px;background-color: #ffffff; position: absolute;"></div><input style="display:none" type="text" id="fId" value="${requestScope.fId}"/>
<font size="" color="black">2021年6月22日</font>
</body>

</html>
<script src="${pageContext.request.contextPath}/Resource/js/jquery-3.3.1.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/Resource/echarts/echarts.common.min.js"></script>
<script>

	var myArray;
	var myArrayLike;
	$.ajax({
		url : "/Anonymous/selectFundValueChangeData.do",//请求地址
		dataType : "json",//数据格式
		type : "post",//请求方式
		async : false,//是否异步请求
		data:{ //传入数据到后台
			fId:$("#fId").val()
		},
		success : function(data) {   //成功返回数据
			myArray=data;
		}
	});
	$.ajax({
		url : "/Anonymous/selectFundValueChangeData.do",//请求地址
		dataType : "json",//数据格式
		type : "post",//请求方式
		async : false,//是否异步请求
		data:{ //传入数据到后台
			fId:"005827"
		},
		success : function(data) {   //成功返回数据
			myArrayLike=data;
		}
	});

	var fvcDate = new Array();
	var fvcDwjz = new Array();
	for(var i=0;i<myArray.length;i++){    //遍历data数组

		var date = new Date(parseInt(myArray[i].fvcDate));
		fvcDate[fvcDate.length] = date.toLocaleDateString(); //设置日期格式

		fvcDwjz[fvcDwjz.length] = myArray[i].fvcDwjz;
		//console.log("基金编号："+myArray[i].fId);
	}


	//-----------------数据显示月份模块-------------------------
	//六个月
	//获取最后一个日期的月份
	//留个bug 1月份的上一月是12月
	var timeArr = fvcDate[fvcDate.length-1].split("/");
	var year = timeArr[0];
	var month = parseInt(timeArr[1])-6;
	var day = timeArr[2];
	var countDate=0;  //统计有多少个日期数据
	//最大不会超过186  如果年份相同   月份正好是最后一个日期月份-1
	console.log(year+" "+month+" "+day);
	var dateTime = new Date(year,month,day);
	for(var i=0; i< fvcDate.length;i++) {
		var timeArrNow = fvcDate[i].split("/");
		var dateTime2 = new Date(timeArrNow[0],timeArrNow[1],timeArrNow[2]);
		if (dateTime2.getTime() >= dateTime.getTime()){
			countDate++;
		}
		// if ((timeArrNow[0] == year) &&
		// 		(parseInt(timeArrNow[1]) == parseInt(month)-1 ||
		// 				parseInt(timeArrNow[1]) == parseInt(month)-2 ||
		// 				parseInt(timeArrNow[1]) == parseInt(month)-3 || parseInt(timeArrNow[1]) == parseInt(month))){
		// }
	}
	//---------------------------------------------------------








	var fvcDwjzLike = new Array();
	for(var i=0;i<myArray.length;i++){    //遍历data数组
		if (i < myArray.length - myArrayLike.length){
			fvcDwjzLike[fvcDwjzLike.length] = 0;
		}else{
			fvcDwjzLike[fvcDwjzLike.length] = myArrayLike[i - (myArray.length - myArrayLike.length)].fvcDwjz;
		}
	}
	var myChart;
	var option;
	function loadLine() {
		option = {
			tooltip: {
				trigger: 'axis',
				formatter: function(a) {
					var text = a[0].name;
					a.reverse().forEach( (b, c) => {
						text += '<br />' + b.seriesName + ':'+'&nbsp;' + b.data+'(单位/元)';
					});
					console.info(text);
					return text;
				}
			},
			//工具框，可以选择
			toolbox: {
				feature: {
					saveAsImage: {} //下载工具
				}
			},

			color:['#1AA034','#AA604C'],
			legend: {
				data: ['单位净值','净值回报','同类单位净值'],
				x: 'right', // 'center' | 'left' | {number},
				y: 'bottom', // 'center' | 'bottom' | {number}
				padding: [0, 220, 15, 0],
				itemWidth:18,//图例的宽度
				itemHeight:3,//图例的高度
				icon: 'rectangle'
			},
			xAxis: {
				type: 'category',
				data: (fvcDate.slice(-countDate-1)),
				boundaryGap: false
			},
			yAxis: {
				type: 'value',
				name: "所有",
				min: 0,
				max: 5,
				splitNumber: 1, // 设置y轴刻度间隔个数
				interval:1, //每次增加几个
				minInterval: 1,
				// 坐标轴颜色
				axisLine: {
					lineStyle: {
						color: '#2d303b'
					}
				},// 坐标轴颜色
				splitLine: {
					lineStyle: {
						color: ['#cccccc']
					}
				},// 分割线颜色
				axisLabel: {
					show: true,
					interval: 'auto',
					formatter: '{value}元',
					color: '#000000'
				}// 坐标轴的文字颜色
				// axisPointer: {
				//     show: true
				// }
			},
			series: [
				{
					symbol: 'star',
					symbolSize:0,
					name: '同类单位净值',
					type: 'line',
					data: (fvcDwjzLike.slice(-countDate-1)),
					symbol: 'circle',
					label: {},
					connectNulls: true,
					//线条大小
					lineStyle: {
						color: '#1AA034',
					        width: 1
					},
					emphasis:{
						lineStyle: {
							width: 1
						}
					}
				},
				{
					symbol: 'star',
					symbolSize:0,
					name: '单位净值',
					type: 'line',
					data: (fvcDwjz.slice(-countDate-1)),
					symbol: 'circle',
					label: {},
					//线条大小
					lineStyle: {
						color: '#AA604C',
					        width: 1
					},
					emphasis:{
						lineStyle: {
							width: 1
						}
					}
				}
			],
			dataZoom: [
				{
					//slider表示有滑动块的，inside表示内置的
					type: 'inside',
					show: true,
					xAxisIndex: [0],
					start: 0,
					end: 9999,
					showDetail: true// 拖拽时，是否显示详细信息
				}
			]
		};
		myChart = echarts.init(document.getElementById('main'));
		myChart.setOption(option)
	}

	$(function () {
		loadLine();

		$("#btn_click").click(function () {
			option.dataZoom[0].start = option.dataZoom[0].start + 10;
			option.dataZoom[0].end = option.dataZoom[0].end + 10;
			myChart.setOption(option)
		})

		$('input').RangeSlider({
			min: 0, max: 12, step: 1, callback: function ($value) {
				var p = 100 / 24 * $value

				if (p != option.dataZoom[0].start) {
					option.dataZoom[0].start = p;
					option.dataZoom[0].end = p + 50;
					myChart.setOption(option)
				}
			}
		});

		myChart.on('datazoom',function(result){
			var h = Math.round(result.batch[0].start * 23 / 100)
			var val = $('input').val();

			if(h != val){
				$('input').val(h);
			}

		})
	})

	$.fn.RangeSlider = function (cfg) {
		this.sliderCfg = {
			min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
			max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
			step: cfg && Number(cfg.step) ? cfg.step : 1,
			callback: cfg && cfg.callback ? cfg.callback : null
		};

		var $input = $(this);
		var min = this.sliderCfg.min;
		var max = this.sliderCfg.max;
		var step = this.sliderCfg.step;
		var callback = this.sliderCfg.callback;

		$input.attr('min', min)
				.attr('max', max)
				.attr('step', step);

		$input.bind("input", function (e) {
			$input.attr('value', this.value);

			if ($.isFunction(callback)) {
				callback(this.value);
			}
		});
	};
</script>